import React, { Component } from 'react';
import echarts from 'echarts';
import styled from 'styled-components'
import { getGrade } from '@/api/index'
import moment from 'moment'
const MainWrapper = styled.div`
  width: calc(100vw - 50px);
  height: calc(100vh - 400px);
  margin: 0 auto;
`;
// moment.locale();
const data = moment('2020-04-07T08:29:06.000Z').format('YYYY/MM/DD');
// const data = moment('2020-04-07T08:29:06.000Z').format('l');
console.log(data, 'data-----')
export default class componentName extends Component {
  state = {
    dataTitle: [],
    dataGrade: [],
    echartType: 'bar',
    name: [],
    seriesData: [],
    selected: []
  }
  render() {
    return (
      <div>
        <h3>teacher-Home</h3>
        <MainWrapper id='main'></MainWrapper>
        <MainWrapper id='main1'></MainWrapper>
      </div>
    );
  }

  componentDidMount() {
    // 操作dom渲染的,需要在didmount生命周期中使用
    this.getData()
  }

  getData() {
    getGrade().then(res => {
      let arr = [], brr = [], crr = []
      res.forEach((item, index) => {
        arr.push(item.username)
        brr.push(item.grade)
        crr.push({
          name: item.username,
          value: Math.round(Math.random() * 100000)
        })
      })
      // 设置数据
      this.setState({
        name: arr,
        dataGrade: brr,
        seriesData: crr
      }, () => {
        // 先有数据，然后再调用dom渲染
        this.myecharts()
      })
    })
  }



  myecharts = () => {
    console.log(this.state.dataTitle, 'this.state.dataTitle---')
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));
    const myChart1 = echarts.init(document.getElementById('main1'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '技能成绩'
      },
      tooltip: {},
      xAxis: {
        data: this.state.name
      },
      yAxis: {},
      series: [{
        name: '技能成绩',
        type: this.state.echartType,
        data: this.state.dataGrade
      }]
    });
    // 饼状图配置
    myChart1.setOption({
      title: {
        text: '学生成绩统计',
        subtext: '连环套',
        left: 'left'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 50,
        top: 20,
        bottom: 20,
        data: this.state.name,
        selected: this.state.selected
      },
      series: [
        {
          name: '姓名',
          type: 'pie',
          radius: '55%',
          center: ['40%', '50%'],
          data: this.state.seriesData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0)'
            }
          }
        }
      ]
    }
    );
  }
}
